<template>
  <div id="parking">
    <el-row>
      <el-col :span="24"  class="tltleText">
      </el-col>
      <el-col :span="24"  class="chartCenter" style="margin-top: 0.6vh">
        <el-row>
          <!--左侧部分 -->
          <el-col :span="5" id = "left">
            <el-row>
              <el-col :span="24">
                <div class = "chart_left chart_main" style="height: 29vh">
                  <el-row>
                    <el-col :span="1" style="width: 1.2vw">
                      <div class = "block"></div>
                    </el-col>
                    <el-col :span="22">
                      <div class = "title">预约车辆偏离情况</div>
                    </el-col>
                  </el-row>
                  <el-col :span="15">
                    <div id = "chart4" class = "chart" style="height: 24vh;width:100%;display:inline-block;"></div>
                  </el-col>
                  <el-col :span="9">
                    <div class="warNum">
                      <div style="margin-top: 4vh;"><p>预约总车辆数</p>
                        <span v-for="items in arr">
                           <i v-for="itemArr in items">{{itemArr}}</i>
                           <div class="clear"></div>
                         </span>
                      </div>
                      <div style="margin-top: 4vh;"><p>预约实达车辆数</p>
                        <span v-for="items in arr1">
                           <i v-for="itemArr1 in items">{{itemArr1}}</i>
                           <div class="clear"></div>
                         </span>
                      </div>
                    </div>
                  </el-col>
                </div>
              </el-col>
              <el-col :span="24">
                <div class = "chart_left chart_main" style="height: 30vh">
                  <el-row>
                    <el-col :span="1" style="width: 1.2vw">
                      <div class = "block"></div>
                    </el-col>
                    <el-col :span="22">
                      <div class = "title">停车场车辆状态</div>
                    </el-col>
                  </el-row>
                  <div id = "chart3" class = "chart"></div>
                </div>
              </el-col>
              <el-col :span="24">
                <div class = "chart_left chart_main" style="height: 30vh">
                  <el-row>
                    <el-col :span="1" style="width: 1.2vw">
                      <div class = "block"></div>
                    </el-col>
                    <el-col :span="22">
                      <div class = "title">停车场占用率</div>
                    </el-col>
                  </el-row>
                  <div id = "chart5" class = "chart" ></div>
                </div>
              </el-col>
            </el-row>
          </el-col>
          <!--中间部分 -->
          <el-col :span="14" id = "center">
            <el-row>
              <el-col :span="24">
                <div class = "chart_center chart_main" style="height: 91vh;">
                  <!--中间部分 -->
                  <div class = "chart_center " style="position: absolute;z-index: 100;height:7vh;width:26vw;">
                    <el-row>
                      <el-col :span="1" style="width: 1.2vw">
                        <div class = "block"></div>
                      </el-col>
                      <el-col :span="22">
                        <div class = "title">停车场车位占用率预警</div>
                      </el-col>
                      <div  style="margin-left: 2%;margin-top:70vh">
                        <div style="margin-left: 1vw;color: #fff;font-size: 1.1vw">
                          <p>车位占用率</p>
                        </div>
                        <div class = "legendBox leg1">
                          <p></p>
                          <p> 小于70%</p>
                        </div>
                        <div class = "legendBox leg3" style="margin-left: 0.4vh">
                          <p></p>
                          <p> 70%-85% </p>
                        </div>
                        <div class = "legendBox leg2">
                          <p></p>
                          <p> 大于85% </p>
                        </div>
                      </div>
                    </el-row>
                  </div>

                  <div class = "line_index">
                    <div style="margin-left: 1vw;color: #fff;font-size: 1.1vw">
                      <p>车位占用率</p>
                    </div>
                    <div class="tab-item" v-for="(item, index) in nav">
                      <div  :class = "item.cla"></div>
                      <div style="color: #fff;font-size: 0.7vw;width: 75%;line-height: 5vh;margin-left: 5vh">{{item.name}}<p style="float: right">{{item.pro}}%</p></div>
                    </div>
                  </div>
                  <div id="allmap" ref="allmap"></div>
                </div>
              </el-col>
            </el-row>
          </el-col>
          <!--左侧部分 -->
          <el-col :span="5" id = "right">
            <el-col :span="24">
              <div class = "chart_right chart_main" style="height: 29vh">
                <el-row>
                  <el-col :span="1" style="width: 1.2vw">
                    <div class = "block"></div>
                  </el-col>
                  <el-col :span="22">
                    <div class = "title">剩余泊位预测趋势图</div>
                  </el-col>
                </el-row>
                <div id = "chart2" class = "chart"></div>

              </div>
            </el-col>
            <el-col :span="24">
           <div id = "park_tab" class = "chart_right chart_main" style="height: 31vh">
             <el-row>
               <el-col :span="1" style="width: 1.2vw">
                 <div class = "block"></div>
               </el-col>
               <el-col :span="22">
                 <div class = "title">停车时长分布</div>
               </el-col>
             </el-row>
             <div id="charts" class="chart"></div>
           </div>
          </el-col>
            <el-col :span="24">
              <div class = "chart_right chart_main" style="height: 29vh">
                <el-row>
                  <el-col :span="1" style="width: 1.2vw">
                    <div class = "block"></div>
                  </el-col>
                  <el-col :span="22">
                    <div class = "title">停车场进出车时分布特征</div>
                  </el-col>
                </el-row>
                <div id = "chart6" class = "chart"></div>
              </div>
            </el-col>
    </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import axios from 'axios';
  import { TMap } from '../TMap';
  import 'font-awesome/css/font-awesome.min.css';
  import {parks,venue} from '../../static/js/map/parking.js';
  import {config,xAxiss,yAxiss,grid,tooltip,dotHtml,legend} from '../../static/js/config/chartConfig.js';
  import jq from 'jquery';
  var echarts = require('echarts');
  var chart1 = [{"tm":"一小时以内","nu":200,'nm':300,"pro":5.25},{"tm":"1","nu":260,'nm':300,"pro":6.82},{"tm":"2","nu":400,'nm':350,"pro":10.50},{"tm":"3","nu":600,'nm':300,"pro":15.75},
    {"tm":"4","nu":1200,'nm':300,"pro":31.50},{"tm":"5","nu":600,'nm':300,"pro":15.75},{"tm":"6","nu":300,'nm':300,"pro":7.87},{"tm":"7","nu":200,'nm':300,"pro":5.25},{"tm":"9","nu":50,'nm':300,"pro":1.31}];
  var tab = [{"time":'7:00-8:00',"num":500},{"time":'8:00-9:00',"num":488},{"time":'9:00-10:00',"num":455},{"time":'10:00-11:00',"num":432}
    ,{"time":'11:00-12:00',"num":399},{"time":'12:00-13:00',"num":367},{"time":'13:00-14:00',"num":366},{"time":'14:00-15:00',"num":355},{"time":'15:00-16:00',"num":300}
    ,{"time":'16:00-17:00',"num":456},{"time":'17:00-18:00',"num":500},{"time":'18:00-19:00',"num":555}];
  var chart2 = [{
    ranking: '1',
    parkNmae: '停车场1',
    berth: '123'
  }, {
    ranking: '2',
    parkNmae: '停车场2',
    berth: '113'
  }, {
    ranking: '3',
    parkNmae: '停车场3',
    berth: '109'
  }, {
    ranking: '4',
    parkNmae: '停车场4',
    berth: '87'
  }, {
    ranking: '5',
    parkNmae: '停车场5',
    berth: '78'
  }, {
    ranking: '6',
    parkNmae: '停车场6',
    berth: '66'
  }, {
    ranking: '7',
    parkNmae: '停车场7',
    berth: '42'
  }, {
    ranking: '8',
    parkNmae: '停车场8',
    berth: '42'
  }, {
    ranking: '9',
    parkNmae: '停车场9',
    berth: '42'
  }, {
    ranking: '10',
    parkNmae: '停车场10',
    berth: '42'
  }, {
    ranking: '11',
    parkNmae: '停车场11',
    berth: '42'
  }, {
    ranking: '12',
    parkNmae: '停车场12',
    berth: '42'
  }, {
    ranking: '13',
    parkNmae: '停车场13',
    berth: '42'
  }, {
    ranking: '14',
    parkNmae: '停车场14',
    berth: '42'
  }, {
    ranking: '15',
    parkNmae: '停车场15',
    berth: '42'
  }, {
    ranking: '16',
    parkNmae: '停车场16',
    berth: '42'
  }, {
    ranking: '17',
    parkNmae: '停车场17',
    berth: '42'
  }]
  export default {
    name:"parking",
    components: {

    },
    data(){
      return{
        tableData:chart2,
        pa_tab:tab,
        t_w1:'20px',
        t_w2:'200px',
        nav: [
          {name: '中央公园停车场',pro:45,cla:'it_color1'},
          {name: '园博园停车场',pro:79,cla:'it_color3'},
          {name: '华侨城停车场',pro:88,cla:'it_color3'}
        ],
        axisTicklineWidth:'1',
        arr:[],
        arr1:[],
        arr2:[],
        arr3:[]
      }
    },
    components: {
    },
    mounted () {
      this.t_w1 =config().fontSize*7+'px'
      this.t_w2 =config().fontSize*8+'px'
      // this.chart1()
      this.chart2()
      this.chart3()
      this.chart4()
      this.chart5()
      this.chart6()
      this.chart()
      this.map()
      let that = this

      var peoCurAbout = "2500";
      var arr=this.arr
      peoCurAbout = peoCurAbout.split('');
      arr.push(peoCurAbout)

      var peoPlanAbout = "2100";
      var arr1=this.arr1
      peoPlanAbout = peoPlanAbout.split('');
      arr1.push(peoPlanAbout)

      var peoPlanlk = "300辆";
      var arr2=this.arr2
      peoPlanlk = peoPlanlk.split('');
      arr2.push(peoPlanlk)

      var peoPlansy = "700个";
      var arr3=this.arr3
      peoPlansy = peoPlansy.split('');
      arr3.push(peoPlansy)

    },
    methods: {
      map(){
        var p = parks();
        var point  = {'max':8,'min':0,'data':[
            {"lat":29.721545,"lng":106.543758,"value":1000},
            {"lat":29.717389,"lng":106.539831,"value":1500},
            {"lat":29.714967,"lng":106.535861,"value":889},
            {"lat":29.714296,"lng":106.536419,"value":768},
            {"lat":29.714669,"lng":106.537578,"value":235},
            {"lat":29.712451,"lng":106.537664,"value":349},
            {"lat":29.713476,"lng":106.539617,"value":769},
            {"lat":29.714165,"lng":106.539016,"value":412}
          ]};
        TMap().then(qq => {
          var map = new qq.maps.Map(document.getElementById("allmap"), {
            // 地图的中心地理坐标。
            center: new qq.maps.LatLng(29.717986,106.543071),
            //disableDefaultUI: true,    //禁止所有控件
            zoom: 15,
            mapStyleId: 'style1',
            //disableDefaultUI: true,    //禁止所有控件
          });
          //停车场轮廓
          var c = [85,20,50,30,40,60,33,39,82,70,90,60,60,18,89,67,34]
          var color = ['#20dd04','#E88216','#F32056'];
          for(var i = 0;i < p.length; i++) {
            (function(v){
                var path = []
                var cl = color[0]
                if(c[v]>=70&&c[v]<85){
                  cl = color[1]
                }else if(c[v]>=85){
                  cl = color[2]
                }
                  for (var j = 0; j < p[v].path.length; j++) {
                    path.push(new qq.maps.LatLng(p[v].path[j][0],p[v].path[j][1]))
                  }
                var polygon = new qq.maps.Polygon({
                  map: map,
                  path: path,
                  strokeWeight: 0,
                  zIndex: 1000,
                  strokeColor: new qq.maps.Color(0, 0, 0, 0.8),
                  fillColor: qq.maps.Color.fromHex(cl, 0.6)
                });
              if(p[v].showName) {
                var center = new qq.maps.LatLng(p[v].center[0], p[v].center[1]);
                var label = new qq.maps.Label({
                  position: center,
                  map: map,
                  content: '<div class = "tit">' + p[v].name + '</div>'
                });
              }
              var infoWin = new qq.maps.InfoWindow({
                map: map
              });
                qq.maps.event.addListener(polygon, 'click', function() {
                  infoWin.open();
                  infoWin.setContent('<div class = "mk" style="text-align:center;white-space:'+
                    'nowrap;margin:10px;color: #000fff;">' +
                    p[v].name + ' 停车场</div>');
                  infoWin.setPosition(center);
                });
            })(i);
          }

          qq.maps.event.addListener(map,'zoom_changed',function() {
            var zoomLevel = map.getZoom();
            var si = {"f15":1.5,"f16":1.8,"f17":2.3,"f18":3.8}
            //jq('.tit').css('font-size',si['f'+zoomLevel]+'vh')
            if(zoomLevel>14){
              jq('.tit').css('display','block')
            }else{
              jq('.tit').css('display','none')
            }
          });
          //国博馆轮廓
          for (var n = 0; n < venue().length; n++) {
            var ph = []
            for (var k = 0; k < venue()[n].path.length; k++) {
              ph.push(new qq.maps.LatLng(venue()[n].path[k][0], venue()[n].path[k][1]))
            }
            var cl1 = '#a2a6a7'
            var c1 = 0.4
            var bw = 0
            if(n == 0){
              c1 = 0.001
              bw = 2
            }
            if(n > 2){
              c1 = 0.8
              bw = 0
              cl1 = '#1281D5'
            }
            var polygon2 = new qq.maps.Polygon({
              map: map,
              path: ph,
              strokeWeight: bw,
              strokeDashStyle: 'dash',
              strokeColor: '#a2ecfb',
              fillColor: qq.maps.Color.fromHex(cl1, c1)
            });
            var center = new qq.maps.LatLng(venue()[n].center[0], venue()[n].center[1]);
            var label = new qq.maps.Label({
              position: center,
              map: map,
              content: '<div class = "tit">' + venue()[n].name + '</div>'
            });
          }
        });
        jq(function(){
          jq("#allmap").bind("DOMNodeInserted",function(e){
            var tempCount = 0;
            jq("#allmap .smnoprint").siblings().each(function(){
              tempCount++;
              if(tempCount==2||tempCount==3){
                jq(this).remove();
              }
            });
          });
        });

      },
      chart1(){
        var data1 = [];
        var data2 = [];
        var data3 = [];
        var data4=[];
        var xData  = [];
        var data5=[];
        // var carData = []
        for (var i = 1; i <chart1.length; i++) {
          var tmp = {}
          var tmp1 = {}
          var tmp2={}
          tmp1.value = chart1[i].nu+100
          tmp1.symbolSize = [jq("#chart1").width()*0.03,jq("#chart1").width()*0.025]
          tmp.value = chart1[i].nu
          tmp2.value = chart1[i].nm
          tmp. symbolPosition = 'end'
          tmp2.symbolPosition = 'end'
          xData.push(chart1[i].tm)
          data1.push(chart1[i].nu)
          data4.push(chart1[i].nm)
          data3.push(chart1[i].pro)
          data2.push(tmp)
          data5.push(tmp2)
        }
        var barWidth = jq("#chart1").width()/xData.length*0.25
        var y = []
        y.push(yAxiss({'data':'','name':'','lineShow':false,'labelShow':true,'position':'','unit':'',"splitLineShow":false,"splitLineType":'dashed',"splitLineColor":''}),yAxiss({'data':'','name':'','lineShow':false,'labelShow':true,'position':'right','unit':'%',"splitLineShow":false,"splitLineType":'dashed',"splitLineColor":''}))
        var chartsBar_left = echarts.init(document.getElementById('chart1'));
        var option = {
          tooltip:  {
            trigger: "axis",
            axisPointer: config().axisPointer,
            textStyle: config().textStyle,
            formatter: function(params) {
              var result = params[0].name
              result += "</br>" + dotHtml(params[0].color) + params[0].seriesName + '：' + params[0].data+' 辆'+
                "</br>" + dotHtml(params[4].color) + params[4].seriesName + '：' + params[4].data+' 辆'+
                "</br>" + dotHtml(params[1].color) + params[1].seriesName + '：' + params[1].data+' %'
              return result}
          },
          legend: legend(['累计车辆数','新增车辆数','利用率'],1),
          grid: grid(),
          xAxis: xAxiss({'data':xData,'name':'','lineShow':true,'labelShow':true,'position':'','unit':'',"splitLineShow":false,"splitLineType":'dashed',"splitLineColor":''}),
          yAxis:y,
          series: [{
            name :'累计车辆数',
            type: 'bar',
            itemStyle: {
              normal: {
                color: '#14b1eb',
                opacity: 0.7
              }
            },
            //silent: true,
            barWidth: barWidth,
            barGap: '-100%', // Make series be overlap
            data: data1
          },{
            name:'利用率',
            data: data3,
            yAxisIndex: 1,
            type: 'line',
            symbol: 'circle',
            symbolSize: config().symbolSize,
            showSymbol: false,
            z:20,
            lineStyle: {
              width: config().lineWidth,
              color:'#ff2661'
            },
          },{
            name: '',
            type: 'pictorialBar',
            symbolSize: [barWidth,  barWidth*0.6],
            symbolOffset: [-barWidth*0.6, -barWidth*0.3],
            z: 12,
            itemStyle: {
              normal: {
                color: '#14b1eb'
              }
            },
            data: data2
          }, {
            name: '',
            type: 'pictorialBar',
            symbolSize: [barWidth, barWidth*0.6],
            symbolOffset: [-barWidth*0.6, barWidth*0.3],
            z: 12,
            itemStyle: {
              normal: {
                color: '#14b1eb'
              }
            },
            data: data1
          },{
            name :'新增车辆数',
            type: 'bar',
            itemStyle: {
              normal: {
                color: '#49fcb0',
                opacity: 0.7,
              }
            },
            //silent: true,
            barWidth: barWidth,
            barGap: '20%', // Make series be overlap
            data: data4
          },{
            name: '',
            type: 'pictorialBar',
            symbolSize: [barWidth,  barWidth*0.6],
            symbolOffset: [barWidth*0.6, -barWidth*0.3],
            z: 12,
            itemStyle: {
              normal: {
                color: '#2ce495'
              }
            },
            data: data5
          }, {
            name: '',
            type: 'pictorialBar',
            symbolSize: [barWidth, barWidth*0.6],
            symbolOffset: [barWidth*0.6, barWidth*0.3],
            z: 12,
            itemStyle: {
              normal: {
                color: '#2ce495'
              }
            },
            data: data4
          }]
        };
        chartsBar_left.setOption(option)
        window.onresize = chartsBar_left.resize;
      },
      chart2(){
        var xData =['9:00','9:05','9:10','9:15','9:20','9:25','9:30','9:35','9:40','9:45','9:50','9:55','10:00']
        var data = [300,278,267,255,212,209,199,186,154,121,98,74,67]
        var chartsBar_left = echarts.init(document.getElementById('chart2'));
        var option = {
          grid:  grid(),
          tooltip:{
            trigger: "axis",
            textStyle: config().textStyle,
            formatter: function(params) {
              var result = params[0].name
              if(params[0].data==''){
                params[0].data=params[1].data
              }
              result += "</br>" + dotHtml(params[0].color) + params[0].seriesName + '：' + params[0].data
              return result}
              },
          xAxis: xAxiss({'data':xData,'name':'','lineShow':true,'labelShow':true,'position':'','unit':'',"splitLineShow":false,"splitLineType":'dashed',"splitLineColor":''}),
          yAxis:yAxiss({'data':'','name':'','lineShow':false,'labelShow':true,'position':'','unit':'',"splitLineShow":false,"splitLineType":'dashed',"splitLineColor":''}),
          series: [ {
            name: '车辆数',
            type: 'line',
            stack:'1',
            smooth: true,
            showSymbol: false,
            // symbol: 'circle',
            // symbolSize: config().symbolSize,
            data: [300,278,267,255,212,209,199,186,154,121,'','',''],
            itemStyle: {
              normal: {
                 lineStyle: {   //系列级个性化折线样式
                     // width: 5,
                     type:'solid',
                     color: '#00f4ff'
                 }
              }
            },
            lineStyle: {
              normal: {
                width: config().lineWidth
              }
            }
          },{
            name:'',
            type:'line',
            stack: '2',
            showSymbol: false,
            smooth:false,   //关键点，为true是不支持虚线的，实线就用true
            itemStyle:{
              normal:{
                lineStyle:{
                  // width:5,
                  color: '#ff2661',
                  type:'dotted'  //'dotted'虚线 'solid'实线
                }
              }
            },
            lineStyle: {
              normal: {
                width: config().lineWidth
              }
            },
            data:['','','','','','','','','',121,98,74,67],
          }]
        };
        chartsBar_left.setOption(option)
        window.onresize = chartsBar_left.resize;
      },
      chart3(){
        var data1 = [80,80,80,];
        var data3 = [0,20,20,0];
        var data4 = [0,0,30,0];
        var data5 = [0,0,0,130];
        var xData  = ["预约到达车辆数","未预约到达车辆数","剩余车位数","总车位数"];
        var data2 = []
        for (let i = 0; i < data1.length; i++) {
          data2.push(Math.max.apply(null,data1)*0.15)
        }
        var chartsBar_left = echarts.init(document.getElementById('chart3'));
        var option = {
          // tooltip:{
          //   trigger: "axis",
          //   axisPointer: config().axisPointer,
          //   textStyle: config().textStyle,
          //   formatter: function(params) {
          //     var result = params[0].name
          //     result += "</br>" + dotHtml(params[0].color) +  params[0].seriesName + '：' +  params[0].data +
          //       "</br>" + dotHtml(params[1].color) +  params[1].seriesName + '：' +  params[1].data+
          //       "</br>" + dotHtml(params[2].color) +  params[2].seriesName + '：' +  params[2].data
          //     return result
          //   }
          // },
          color: ["rgba(5,93,156,0.6)"],
          //legend: legend(["预约到达车辆数","预约未到车辆数","剩余车位数","总车位数"],1),
          grid: grid(),
          xAxis: {
            data:xData,
            //splitNumber:6,
            axisTick: {
              show: false,
              lineStyle: {
                color: config().color,
                width: config().XYlineWidth
              }
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: config().color,
                width: config().XYlineWidth
              }
            },
            axisLabel: {
              //show: l,
              margin:config().Xmargin,
              interval:0,
              formatter: function (v) {
                if(v == "未预约到达车辆数"||v == "总车位数"){
                  return '\n'+v
                }else{
                  return v
                }
              },
              textStyle: {
                color: config().color,
                fontSize:config().fontSize
              }
            },
            splitLine: {
              show:false
            }
          },
          yAxis:yAxiss({'data':'','name':'','lineShow':false,'labelShow':true,'position':'','unit':'',"splitLineShow":false,"splitLineType":'dashed',"splitLineColor":''}),
          series: [{
            name: "预约到达车辆数",
            type: "bar",
            stack: "总量",
            barWidth:'60%',
            label: {
              normal: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#ffffff',
                  fontSize: config().fontSize,
                },
                formatter: function(params) {
                  if(params.name == '预约到达车辆数'){
                    return params.value
                  }else {
                    return '';
                  }
                }
              }
            },
            itemStyle:{
              normal:{
                  color: function (param) {
                    if(param.name == '预约到达车辆数'){
                      return '#007aff'
                    }else{
                      return 'none'
                    }
                  }
              }
            },
            z:100,
            data: data1
          },{
          name: "未预约到达车辆数",
            type: "bar",
            stack: "总量",
            barWidth:'60%',
            label: {
              normal: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#ffffff',
                  fontSize: config().fontSize,
                },
                formatter: function(params) {
                  if(params.name == '未预约到达车辆数'){
                    return params.value
                  }else {
                    return '';
                  }
                }
              }
            },
            itemStyle:{
            normal:{
              color: function (param) {
                if(param.name == '未预约到达车辆数'){
                  return '#ffb200'
                }else{
                  return 'none'
                }
              }
            }
          },
          z:100,
            data: data3
        },{
            name: "剩余车位数",
            type: "bar",
            stack: "总量",
            barWidth:'60%',
            label: {
              normal: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#ffffff',
                  fontSize: config().fontSize,
                },
                formatter: function(params) {
                  if(params.name == '剩余车位数'){
                    return params.value
                  }else {
                    return '';
                  }
                }
              }
            },
            itemStyle:{
              normal:{
                color: "#179609"
              }
            },
            z:100,
            data: data4
          },{
            name: "总车位数",
            type: "bar",
            stack: "总量",
            barWidth:'60%',
            label: {
              normal: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#ffffff',
                  fontSize: config().fontSize,
                },
                formatter: function(params) {
                  if(params.name == '总车位数'){
                    return params.value
                  }else {
                    return '';
                  }
                }
              }
            },
            itemStyle:{
              normal:{
                color: "#00ddff"
              }
            },
            z:100,
            data: data5
          }]
        };
        chartsBar_left.setOption(option)
        window.onresize = chartsBar_left.resize;
      },
      chart4(){
        var chart4 = echarts.init(document.getElementById('chart4'));
        var option = {
          series: [{
            type: 'line',
            data: [220, 182, 191, 234, 290, 330, 310]
          }]
        };
        var myRate1 = 100;
        var option = {
          series: [{
            type: 'gauge',
            center: ['48%', '75%'], // 默认全局居中
            radius: '90%',
            splitNumber: 10, //刻度数量
            min: -100,
            max: 100,
            startAngle: 180,
            endAngle: 0,
            clockwise: true,
            axisLine: {
              show: true,
              lineStyle: {
                width: this.axisTicklineWidth,
                shadowBlur: 0,
                color: [
                  [1, '#03B7C9']
                ]
              }
            },
            axisTick: { //仪表盘轴线
              show: true,
              lineStyle: {
                color: '#03B7C9',
                width: this.axisTicklineWidth,
              },
              length: this.axisTicklineWidth*13,
              splitNumber: this.axisTicklineWidth*10
            },
            splitLine: {//刻度样式
              show: true,
              width: this.axisTicklineWidth*2,
              length: this.axisTicklineWidth*18,
              lineStyle: {
                color: '#03B7C9',
              }
            },
            axisLabel: { //分隔线样式
              show: true,
                textStyle: {
                  color: '#03B7C9',
                  fontSize: config().fontSize,
                  fontWeight: 'bold'
                }
            },
            pointer: { //仪表盘指针
              show: 0
            },
            detail: {
              show: false
            },
            data: [{
              name: "",
              value: myRate1
            }]
          },
            {
              type: 'gauge',
              startAngle: 180,
              endAngle: 0,
              center: ['48%', '75%'], // 默认全局居中
              radius: '90%',
              min: -100,
              max: 100,
              axisLine: {
                show: false,
                lineStyle: {
                  width: this.axisTicklineWidth*10,
                  shadowBlur: 0,
                  color: [
                    [0.3, new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [{
                        offset: 0,
                        color: '#07a1fd'
                      },
                        {
                          offset: 1,
                          color: '#1bcffd'
                        }
                      ]
                    )
                    ],
                    [0.5, new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [{
                        offset: 0,
                        color: '#1bcffd'
                      },
                        {
                          offset: 1,
                          color: '#31f2fd'
                        }
                      ]
                    )
                    ],
                    // FFCC00
                    [0.8, new echarts.graphic.LinearGradient(
                      0, 0, 1, 1,
                      [{
                        offset: 0,
                        color: '#31f2fd'
                      },
                        {
                          offset: 1,
                          color: '#e44b7b'
                        }
                      ]
                    )
                    ],
                    [1, new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [{
                        offset: 0,
                        color: '#e44b7b'
                      },
                        {
                          offset: 1,
                          color: '#e44b7b'
                        }
                      ]
                    )
                    ]
                  ]
                }
              },
              axisTick: {
                show: false,

              },
              splitLine: {
                show: false,
              },
              axisLabel: {
                show: false
              },
              pointer:{//指针长短
                show: true,
                width: this.axisTicklineWidth*3,
                length:config().fontSize*6.7,
              },
              detail: {
                formatter:'{value}%',
                offsetCenter: [0, '-25%'],       // x, y，单位px
                textStyle: {
                  color: '#fff',
                  fontSize: config().fontSize*1.3,
                }
              },
              itemStyle: {
                normal: {
                  color: "#03B7C9",
                }
              },
              title: { //标题
                show: true,
                offsetCenter: [0, "25%"], // x, y，单位px
                textStyle: {
                  color: "#fff",
                  fontSize: config().fontSize*1.3, //表盘上的标题文字大小
                },
              },
              data: [{
                value: 20,
                name:"预约与实达偏差"
              }]
            }
          ]
        }
        chart4.setOption(option);
        window.onresize = chart4.resize;
      },
      chart5(){
          var xData =[6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
          var data = [5,20,50,65,90,95,60,65,80,60,45,20,15,5,1]
          var chart5 = echarts.init(document.getElementById('chart5'));
          var option = {
            grid:  grid(),
            tooltip:{
              trigger: "axis",
              axisPointer: config().axisPointer,
              textStyle: config().textStyle,
              formatter: function(params) {
                var result = params[0].name
                result += "</br>" + dotHtml(params[0].color) +  params[0].seriesName + '：' +  params[0].data +'%'
                return result
              }
            },
            xAxis: xAxiss({'data':xData,'name':'','lineShow':true,'labelShow':true,'position':'','unit':'',"splitLineShow":false,"splitLineType":'dashed',"splitLineColor":''}),
            yAxis:yAxiss({'data':'','name':'','lineShow':false,'labelShow':true,'position':'','unit':'%',"splitLineShow":false,"splitLineType":'dashed',"splitLineColor":''}),
            series: [ {
              name: '占用率',
              type: 'line',
              smooth: true,
              showSymbol: false,
              symbol: 'circle',
              symbolSize: config().symbolSize,
              data: data,
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(0,244,255,1)'
                  }, {
                    offset: 1,
                    color: 'rgba(0,244,255,0.1)'
                  }], false)
                }
              },
              itemStyle: {
                normal: {
                  color: '#00f4ff'
                }
              },
              lineStyle: {
                normal: {
                  width: config().lineWidth
                }
              }
            }]
          };
          chart5.setOption(option)
          window.onresize = chart5.resize;
      },
      chart6(){
        var chart6 = echarts.init(document.getElementById('chart6'));
        var xData = ['6:00', '6:30','7:00','7:30','8:00','8:30','9:00','9:30','10:00','10:30','11:30','12:00','12:30','13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00','18:30',"19:00",'19:30'];
        var data1 = [200,280,500,700,900,1200,1600,1000,800,600,300,200,50,30,200,300,200,100,80,60,20,10,0,0,0,0,0,0];
        var data2 = [0,0,0,0,0,0,0,0,0,10,600,1500,1800,1000,100,80,120,90,300,1000,2600,3600,2000,1500,800,300,600,800];
        var option = {
          tooltip:{
            trigger: "axis",
            axisPointer: config().axisPointer,
            textStyle: config().textStyle,
            formatter: function(params) {
              var result = params[0].name
              result += "</br>" + dotHtml(params[0].color.colorStops[0].color) +  params[0].seriesName + '：' +  params[0].data +'辆' +
                "</br>" + dotHtml(params[1].color.colorStops[0].color) +  params[1].seriesName + '：' +  params[1].data +'辆'
              return result
            }
          },
          legend: legend(['进车数量', '出车数量'],1),
          grid:  grid(),
          yAxis:yAxiss({'data':'','name':'','lineShow':true,'labelShow':true,'position':'','unit':'',"splitLineShow":false,"splitLineType":'dashed',"splitLineColor":''}),
          xAxis: xAxiss({'data':xData,'name':'','lineShow':true,'labelShow':true,'position':'','unit':'',"splitLineShow":false,"splitLineType":'dashed',"splitLineColor":''}),
          series: [{
            name: '进车数量',
            type: 'line',
            //smooth: true,
            symbol: 'circle',
            symbolSize: config().symbolSize,
            //showSymbol: false,
            lineStyle: {
              normal: {
                width: config().lineWidth
              }
            },

            itemStyle: {
              normal: {

                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: 'rgba(16,97,204,1)'
                }, {
                  offset: 1,
                  color: 'rgba(17,235,210,1)'
                }])
              },
              emphasis: {
                color: 'rgb(0,196,132)',
                borderColor: 'rgba(0,196,132,0.2)',
                extraCssText: 'box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);',
                borderWidth: 10
              }
            },
            data: data1
          }, {
            name: '出车数量',
            type: 'line',
            //smooth: true,
            symbol: 'circle',
            symbolSize: config().symbolSize,
            //showSymbol: false,
            lineStyle: {
              normal: {
                width:  config().lineWidth
              }
            },
            itemStyle: {
              normal: {

                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: 'rgba(205,52,42,1)'
                }, {
                  offset: 1,
                  color: 'rgba(235,235,21,1)'
                }])
              },
              emphasis: {
                color: 'rgb(99,250,235)',
                borderColor: 'rgba(99,250,235,0.2)',
                extraCssText: 'box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);',
                borderWidth: 10
              }
            },
            data: data2
          }  ]
        };
        chart6.setOption(option)
        window.onresize = chart6.resize;
      },
      chart(){
        var xData = ["小于2小时","2-4小时","4-6小时","6-8小时","8小时以上"];
        var data1 =[61,111,211,95,31]
        // var data21 = []
        var sum =  0;
        for(var i = 0;i < data1.length; i++) {
          sum = sum + data1[i]
        }

        var barWidth = jq("#charts").width()/xData.length*0.25
        var chartsBar_left = echarts.init(document.getElementById('charts'));
        var option = {
          tooltip:  tooltip(),
          //legend: legend(['车辆数'],1),
          grid: {
            left: '5%',
            top: '8%',
            right: '30%',
            bottom: '5%',
            containLabel: true
          },
          tooltip:  tooltip(),
          color:['#0399fd','#ff2661'],
          xAxis: xAxiss({'data':'','name':'','lineShow':false,'labelShow':true,'position':'','unit':'',"splitLineShow":false,"splitLineType":'dashed',"splitLineColor":''}),
          yAxis:yAxiss({'data':xData,'name':'','lineShow':false,'labelShow':true,'position':'','unit':'',"splitLineShow":false,"splitLineType":'dashed',"splitLineColor":''}),
          series: [ {
            type: 'bar',
            name: '车辆数',
            position: 'right',
            barWidth:'40%',
            offset: 80,
            label: {
              normal: {
                show: true,
                position: 'right',
                textStyle: {
                  color: '#ffffff',
                  fontSize: config().fontSize,
                },
                formatter: function(params) {
                  return params.value +'辆 占比：'+(params.value/sum*100).toFixed(2)+'%';
                }
              }
            },
            data: data1
          }]
        };
        chartsBar_left.setOption(option)
        window.onresize = chartsBar_left.resize;
      },
      // chart(){
      //   var car = 'path://M49.592,40.883c-0.053,0.354-0.139,0.697-0.268,0.963c-0.232,0.475-0.455,0.519-1.334,0.475 c-1.135-0.053-2.764,0-4.484,0.068c0,0.476,0.018,0.697,0.018,0.697c0.111,1.299,0.697,1.342,0.931,1.342h3.7 c0.326,0,0.628,0,0.861-0.154c0.301-0.196,0.43-0.772,0.543-1.78c0.017-0.146,0.025-0.336,0.033-0.56v-0.01 c0-0.068,0.008-0.154,0.008-0.25V41.58l0,0C49.6,41.348,49.6,41.09,49.592,40.883L49.592,40.883z M6.057,40.883 c0.053,0.354,0.137,0.697,0.268,0.963c0.23,0.475,0.455,0.519,1.334,0.475c1.137-0.053,2.762,0,4.484,0.068 c0,0.476-0.018,0.697-0.018,0.697c-0.111,1.299-0.697,1.342-0.93,1.342h-3.7c-0.328,0-0.602,0-0.861-0.154 c-0.309-0.18-0.43-0.772-0.541-1.78c-0.018-0.146-0.027-0.336-0.035-0.56v-0.01c0-0.068-0.008-0.154-0.008-0.25V41.58l0,0 C6.057,41.348,6.057,41.09,6.057,40.883L6.057,40.883z M49.867,32.766c0-2.642-0.344-5.224-0.482-5.507 c-0.104-0.207-0.766-0.749-2.271-1.773c-1.522-1.042-1.487-0.887-1.766-1.566c0.25-0.078,0.492-0.224,0.639-0.241 c0.326-0.034,0.345,0.274,1.023,0.274c0.68,0,2.152-0.18,2.453-0.48c0.301-0.303,0.396-0.405,0.396-0.672 c0-0.268-0.156-0.818-0.447-1.146c-0.293-0.327-1.541-0.49-2.273-0.585c-0.729-0.095-0.834,0-1.022,0.121 c-0.304,0.189-0.32,1.919-0.32,1.919l-0.713,0.018c-0.465-1.146-1.11-3.452-2.117-5.269c-1.103-1.979-2.256-2.599-2.737-2.754 c-0.474-0.146-0.904-0.249-4.131-0.576c-3.298-0.344-5.922-0.388-8.262-0.388c-2.342,0-4.967,0.052-8.264,0.388 c-3.229,0.336-3.66,0.43-4.133,0.576s-1.633,0.775-2.736,2.754c-1.006,1.816-1.652,4.123-2.117,5.269L9.87,23.109 c0,0-0.008-1.729-0.318-1.919c-0.189-0.121-0.293-0.225-1.023-0.121c-0.732,0.104-1.98,0.258-2.273,0.585 c-0.293,0.327-0.447,0.878-0.447,1.146c0,0.267,0.094,0.379,0.396,0.672c0.301,0.301,1.773,0.48,2.453,0.48 c0.68,0,0.697-0.309,1.023-0.274c0.146,0.018,0.396,0.163,0.637,0.241c-0.283,0.68-0.24,0.524-1.764,1.566 c-1.506,1.033-2.178,1.566-2.271,1.773c-0.139,0.283-0.482,2.865-0.482,5.508s0.189,5.02,0.189,5.86c0,0.354,0,0.976,0.076,1.565 c0.053,0.354,0.129,0.697,0.268,0.966c0.232,0.473,0.447,0.516,1.334,0.473c1.137-0.051,2.779,0,4.477,0.07 c1.135,0.043,2.297,0.086,3.33,0.11c2.582,0.051,1.826-0.379,2.928-0.36c1.102,0.016,5.447,0.196,9.424,0.196 c3.976,0,8.332-0.182,9.423-0.196c1.102-0.019,0.346,0.411,2.926,0.36c1.033-0.018,2.195-0.067,3.332-0.11 c1.695-0.062,3.348-0.121,4.477-0.07c0.886,0.043,1.103,0,1.332-0.473c0.132-0.269,0.218-0.611,0.269-0.966 c0.086-0.592,0.078-1.213,0.078-1.565C49.678,37.793,49.867,35.408,49.867,32.766L49.867,32.766z M13.219,19.735 c0.412-0.964,1.652-2.9,2.256-3.244c0.145-0.087,1.426-0.491,4.637-0.706c2.953-0.198,6.217-0.276,7.73-0.276 c1.513,0,4.777,0.078,7.729,0.276c3.201,0.215,4.502,0.611,4.639,0.706c0.775,0.533,1.842,2.28,2.256,3.244 c0.412,0.965,0.965,2.858,0.861,3.116c-0.104,0.258,0.104,0.388-1.291,0.275c-1.387-0.103-10.088-0.216-14.185-0.216 c-4.088,0-12.789,0.113-14.184,0.216c-1.395,0.104-1.188-0.018-1.291-0.275C12.254,22.593,12.805,20.708,13.219,19.735 L13.219,19.735z M16.385,30.511c-0.619,0.155-0.988,0.491-1.764,0.482c-0.775,0-2.867-0.353-3.314-0.371 c-0.447-0.017-0.842,0.302-1.076,0.362c-0.23,0.06-0.688-0.104-1.377-0.318c-0.688-0.216-1.092-0.155-1.316-1.094 c-0.232-0.93,0-2.264,0-2.264c1.488-0.068,2.928,0.069,5.621,0.826c2.693,0.758,4.191,2.213,4.191,2.213 S17.004,30.357,16.385,30.511L16.385,30.511z M36.629,37.293c-1.23,0.164-6.386,0.207-8.794,0.207c-2.412,0-7.566-0.051-8.799-0.207 c-1.256-0.164-2.891-1.67-1.764-2.865c1.523-1.627,1.24-1.576,4.701-2.023C24.967,32.018,27.239,32,27.834,32 c0.584,0,2.865,0.025,5.859,0.404c3.461,0.447,3.178,0.396,4.699,2.022C39.521,35.623,37.887,37.129,36.629,37.293L36.629,37.293z  M48.129,29.582c-0.232,0.93-0.629,0.878-1.318,1.093c-0.688,0.216-1.145,0.371-1.377,0.319c-0.231-0.053-0.627-0.371-1.074-0.361 c-0.448,0.018-2.539,0.37-3.313,0.37c-0.772,0-1.146-0.328-1.764-0.481c-0.621-0.154-0.966-0.154-0.966-0.154 s1.49-1.464,4.191-2.213c2.693-0.758,4.131-0.895,5.621-0.826C48.129,27.309,48.361,28.643,48.129,29.582L48.129,29.582z';
      //   var data1 = [];
      //   var data2=[]
      //   var data3 = [];
      //   var xData  = [];
      //   var carData = []
      //   for (var i = 1; i <chart1.length; i++) {
      //     var tmp = {}
      //     var tmp1 = {}
      //     tmp1.value = chart1[i].nu+100;
      //     tmp1.symbol = car;
      //     tmp1.symbolSize = [jq("#charts").width()*0.03,jq("#charts").width()*0.025];
      //     tmp.value = chart1[i].nu;
      //     tmp. symbolPosition = 'end';
      //     xData.push(chart1[i].tm);
      //     data1.push(chart1[i].nu);
      //     data3.push(chart1[i].pro)
      //     data2.push(tmp);
      //     carData.push(tmp1);
      //   }
      //   var y = []
      //   y.push(yAxiss({'data':'','name':'','lineShow':false,'labelShow':true,'position':'','unit':'',"splitLineShow":false,"splitLineType":'dashed',"splitLineColor":''}),yAxiss({'data':'','name':'','lineShow':false,'labelShow':true,'position':'right','unit':'%',"splitLineShow":false,"splitLineType":'dashed',"splitLineColor":''}))
      //   var charts = echarts.init(document.getElementById('charts'));
      //   var barWidth = jq("#charts").width()/xData.length*0.25
      //   var option = {
      //     tooltip:  {
      //       trigger: "axis",
      //       axisPointer: config().axisPointer,
      //       textStyle: config().textStyle,
      //       formatter: function(params) {
      //         var result = params[0].name
      //         result += "</br>" + dotHtml(params[0].color) + params[0].seriesName + '：' + params[0].data+' %'+
      //           "</br>" + dotHtml(params[1].color) + params[1].seriesName + '：' + params[1].data+'辆 '
      //         return result}
      //     },
      //     legend: legend(['车辆数','车辆数占比'],1),
      //     grid: grid(18),
      //     xAxis: xAxiss({'data':xData,'name':'','lineShow':true,'labelShow':true,'position':'','unit':'',"splitLineShow":false,"splitLineType":'dashed',"splitLineColor":''}),
      //     yAxis:y,
      //     series: [{
      //       name:'车辆数占比',
      //       data: data3,
      //       yAxisIndex: 1,
      //       type: 'line',
      //       symbol: 'circle',
      //       symbolSize: config().symbolSize,
      //       showSymbol: false,
      //       z:20,
      //       lineStyle: {
      //         width: config().lineWidth
      //       },
      //       itemStyle: {
      //         normal: {
      //           color:  "#F7D868"
      //         }
      //       },
      //     },{
      //       name :'车辆数',
      //       type: 'bar',
      //       itemStyle: {
      //         normal: {
      //           color: '#14b1eb',
      //           opacity: 0.7
      //         },
      //         emphasis: {
      //           color: '#FD2761',
      //         }
      //       },
      //       //silent: true,
      //       barWidth: barWidth,
      //       barGap: '-100%', // Make series be overlap
      //       data: data1
      //     },{
      //       name: '',
      //       type: 'pictorialBar',
      //       symbolSize: [barWidth,  barWidth*0.6],
      //       symbolOffset: [barWidth*0.84, -barWidth*0.3],
      //       z: 12,
      //       itemStyle: {
      //         normal: {
      //           color: '#14b1eb'
      //         },
      //         emphasis: {
      //           color: '#FD2761',
      //         }
      //       },
      //       data: data2
      //     }, {
      //       name: '',
      //       type: 'pictorialBar',
      //       symbolSize: [barWidth, barWidth*0.6],
      //       symbolOffset: [0, barWidth*0.3],
      //       z: 12,
      //       itemStyle: {
      //         normal: {
      //           color: '#14b1eb'
      //         },
      //         emphasis: {
      //           color: '#FD2761',
      //         }
      //       },
      //       data: data1
      //     },{
      //       name: 'glyph',
      //       type: 'pictorialBar',
      //       barGap: '10%',
      //       symbolPosition: 'end',
      //       symbolSize: 50,
      //       symbolOffset: ['-100%', '-120%'],
      //       itemStyle: {
      //         normal: {
      //           color: '#14b1eb',
      //           opacity: 0.7
      //         },
      //         emphasis: {
      //           color: '#FD2761',
      //         }
      //       },
      //       data:carData
      //     }]
      //   };
      //   charts.setOption(option)
      //   window.onresize = charts.resize;
      // },
    }
  }
</script>
<style lang="scss" scoped>
  #parking{
    width: 100%;
    height: 100vh;
    background: #081220;
    *{margin: 0;padding: 0;}
    .clear{clear:both;}

    .line_index{
      position: absolute;
      right: 2vh;
      bottom: 6vh;
      width: 20%;
      z-index: 1000;
      margin-left: 0%;
      background-color: rgba(89,93,100,0.5);
    }
    .it_color1{
      border-radius: 50%;
      height: 2.5vh;
      width: 2.5vh;
      float: left;
      margin-left: 1vh;
      margin-top: 1.5vh;
      background-color: #20dd04;
    }
    .it_color2{
      border-radius: 50%;
      height: 2.5vh;
      width: 2.5vh;
      float: left;
      margin-left: 1vh;
      margin-top: 1.5vh;
      background-color: #E88216;
    }
    .it_color3{
      border-radius: 50%;
      height: 2.5vh;
      width: 2.5vh;
      float: left;
      margin-left: 1vh;
      margin-top: 1.5vh;
      background-color: #F32056;
    }
    #allmap{
      height: 91vh;
      overflow: hidden;
    }

    .legendBox{
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.9vw;
      color: #AFB8D2;
      margin-top: 1vh;
      width: 30%;
      p:nth-child(1){
        width: 1.8vw;
        height: 0.9vw;
      }
    }

    .leg1{
      p:nth-child(1){background: #20dd04;}
      p:nth-child(2){margin: 0 0.5vw}
      p:nth-child(3){color: #FF2661;}
    }
    .leg2{
      p:nth-child(1){background: #F32056;}
      p:nth-child(2){margin: 0 0.5vw}
      p:nth-child(3){ color: #FBCE00;}
    }
    .leg3{
      p:nth-child(1){background: #E88216;}
      p:nth-child(2){margin: 0 0.5vw}
      p:nth-child(3){color: #0399FD;}
    }

    .tltleText{
      height: 7vh;
    }
    .chart{
      height: 85%;
    }
    .next_chart{
      width: 50vh;
      height: 34vh;
    }

    .chart_left{
      height: 28vh;
    }
    .park_top3{
      background-repeat: no-repeat;
      background-size: 2.5vh;
      background-position-x: 50%;
      background-position-y: 40%;
    }
    .park_top31{
      background-image: url('../../static/img/park_top1.png');
    }
    .park_top32{
      background-image: url('../../static/img/park_top2.png');
    }
    .park_top33{
      background-image: url('../../static/img/park_top3.png');
    }
    .warNum{
      display: inline-block;
      div p{
        color: #D4D6DA;
        font-size: 0.7vw;
        height: 3vh;
        line-height: 3vh;
      }
      div span{
        display: block;
        i{
          font-size: 0.8vw;
          background: #2256d9;
          color: #fff;
          width: 3vh;
          height: 3vh;
          text-align: center;
          line-height: 3vh;
          float: left;
          margin-right: 0.3vh;
          font-style: normal;
        }
      }
    }
  }
</style>
